<template>
  <li @click="menuItemclick">
      <a v-if="item.type === 0" href="#">
          <i v-if="item.icon != null" :class="item.icon"></i>
          <span class="nav-label">{{item.name}}</span>
          <span class="fa arrow"></span>
      </a>
      <ul v-if="item.type === 0" v-bind:class="ulclass" class="nav nav-second-level collapse">
          <menu-item :item="item" v-for="(item,index) in item.list" :key= "index"></menu-item>
      </ul>
      <a v-if="item.type === 1" @click ="menuItemclick(key)" class="J_menuItem" :href="item.url"><i :class="item.icon"></i>{{item.name}}</a>
  </li>
</template>

<script>
  export default{
    data(){
      return {ulclass : 'ulshow'}
    },
    name:'menu-item',
    props: {item :{}},
    methods:{
      menuItemclick(d){
        console.log(d)
      }
    }
  }
</script>

<style>
.ulshow{
  display: block;
}
</style>
